<template>
  <div class="article-list" ref="ArticleList" @scroll="rememberScroll">
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <!-- 上拉加载 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ArticleItem
          v-for="item in articleList"
          :key="item.art_id"
          :articleItem="item"
        ></ArticleItem>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import ArticleItem from './article-item.vue'
import { getArticleAPI } from '@/api/article'
export default {
  name: 'ArticleList',
  components: {
    ArticleItem
  },
  props: {
    channelId: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      finished: false, // 数据全部加载完成
      loading: false, // 正在加载
      refreshing: false, // 正在刷新
      timestamp: Date.now(), // 当前时间戳
      articleList: [], // 文章列表
      scrollTop: 0 // 阅读位置
    }
  },
  methods: {
    // 上拉加载
    async onLoad () {
      // 1. 获取数据
      // 2. 判断下一页是否还有数据: 当前时间戳未空 也就是没有更多了
      //  2.1 如果有: 记录当前时间戳 下一次请求使用
      //  2.2 如果没有: 设置没有更多数据
      // 3. 当前列表追加数据
      // 4. 结束上拉加载操作
      const [err, res] = await getArticleAPI(this.channelId, this.timestamp)
      if (err) return this.$toast.fail('加载失败') // 加载失败
      if (res.data.data.pre_timestamp) {
        this.timestamp = res.data.data.pre_timestamp
      } else {
        this.finished = true
      }
      this.articleList.push(...res.data.data.results)
      this.loading = false
    },
    // 下拉刷新
    async onRefresh () {
      // 1. 重置时间戳: 回到第一页
      // 2. 获取数据
      // 3. 重置全部数据加载完成: 可以再次加载更多
      // 4. 替换当前列表数据时间戳
      // 5. 记录下一次请求的时间戳
      // 6. 结束加刷新操作
      this.timestamp = Date.now()
      const [, res] = await getArticleAPI(this.channelId, this.timestamp)
      this.finished = false
      this.articleList = res.data.data.results
      this.timestamp = res.data.data.pre_timestamp
      this.refreshing = false
    },
    // 滚动监听
    rememberScroll () {
      this.scrollTop = this.$refs.ArticleList.scrollTop
    }
  },
  // 组件被激活
  activated () {
    this.$refs.ArticleList.scrollTop = this.scrollTop
  }
}
</script>

<style scoped lang="less">
.article-list {
  height: 100%;
  overflow-y: auto;
  padding: 0 16px;
}
</style>
